<div class="row">
    <div class="col-lg-12">
        <div class="card card-outline-info">
            <div class="card-header">
                <h4 class="m-b-0 text-white">Form with view only</h4>
            </div>
            <div class="card-body">
                <form class="form-horizontal" role="form">
                    <div class="form-body">
                        <h3 class="box-title">Person Info</h3>
                        <hr class="m-t-0 m-b-40">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-3">First Name:</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static"> John </p>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-3">Last Name:</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static"> Doe </p>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-3">Gender:</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static"> Male </p>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-3">Date of Birth:</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static"> 11/06/1987 </p>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-3">Category:</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static"> Category1 </p>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-3">Membership:</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static"> Free </p>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <h3 class="box-title">DevExtreme Datagrid</h3>
                        <hr class="m-t-0 m-b-40">
                        <div class="row">
                            <div class="col-lg-12">
                                <op-data-grid #dataGrid [dataSource]="dataGridOption.dataSource" [keyName]="dataGridOption.keyName"
                                    [totalRowsCount]="dataGridOption.totalRowsCount" (pageChanged)="onPageChanged($event)"
                                    (selectionChanged)="onSelectionChanged($event)" [isShowFilterRow]="true"
                                    [isShowHeaderFilter]="true" [isShowFilterPanel]="true">
                                    <op-data-grid-column title="Action" width="125" [allowOverflow]="true">
                                        <!-- Removing the class of 'btn-group' maybe fix the Drop Down display issue whick blocked by the row, but still will be blocked by the grid boundary. -->
                                        <!-- That's why we use extra css to fix this issue by now. -->
                                        <div *opProjectedTemplate="let row" class="btn-group">
                                            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
                                                aria-haspopup="true" aria-expanded="false">
                                                Action
                                            </button>
                                            <div class="dropdown-menu">
                                                <a class="dropdown-item" (click)="takeAction(row)">Take Action</a>
                                                <a class="dropdown-item" (click)="takeAction(row)">Another action</a>
                                                <a class="dropdown-item" (click)="takeAction(row)">Something else here</a>
                                                <div class="dropdown-divider"></div>
                                                <a class="dropdown-item" (click)="takeAction(row)">Separated link</a>
                                            </div>
                                        </div>
                                    </op-data-grid-column>

                                    <op-data-grid-column title="Full Name" width="150">
                                        <ng-container *opProjectedTemplate="let row">
                                            {{row.firstName}}, {{row.lastName}}
                                        </ng-container>
                                    </op-data-grid-column>

                                    <op-data-grid-column title="First Name" dataField="firstName" width="125"></op-data-grid-column>
                                    <op-data-grid-column title="Last Name" dataField="lastName" width="125"></op-data-grid-column>
                                    <op-data-grid-column title="Job Title" dataField="jobTitle"></op-data-grid-column>

                                    <op-data-grid-column title="Birthday" dataField="birthday" width="125" dataType="date">
                                        <ng-container *opProjectedTemplate="let row">
                                            {{row.birthday | date: shortDateFormat}}
                                        </ng-container>
                                    </op-data-grid-column>

                                    <op-data-grid-column title="Code" dataField="code" dataType="number"
                                        [groupInterval]="10000"></op-data-grid-column>

                                    <op-data-grid-column title="Status" dataField="status" width="125">
                                        <span *opProjectedTemplate="let row" [innerHTML]="row.status | userStatus"></span>
                                    </op-data-grid-column>

                                    <op-data-grid-master-detail>
                                        <div *opProjectedTemplate="let row">
                                            <div class="master-detail-caption">{{row.firstName + " " + row.lastName}}</div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-md-3 col-xs-6 b-r">
                                                        <strong>First Name</strong>
                                                        <br>
                                                        <p class="text-muted">{{row.firstName}}</p>
                                                    </div>
                                                    <div class="col-md-3 col-xs-6 b-r">
                                                        <strong>Last Name</strong>
                                                        <br>
                                                        <p class="text-muted">{{row.lastName}}</p>
                                                    </div>
                                                    <div class="col-md-3 col-xs-6 b-r">
                                                        <strong>Birthday</strong>
                                                        <br>
                                                        <p class="text-muted">{{row.birthday | date: shortDateFormat}}</p>
                                                    </div>
                                                    <div class="col-md-3 col-xs-6 b-r">
                                                        <strong>Comment</strong>
                                                        <br>
                                                        <p class="text-muted">Comment here</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </op-data-grid-master-detail>
                                </op-data-grid>
                            </div>
                        </div>
                        <h3 class="box-title">Bootstrap Data Table</h3>
                        <hr class="m-t-0 m-b-40">
                        <div class="row">
                            <div class="col-lg-12">
                                <op-data-table [body]="dataTableOption.body" [totalRowsCount]="dataTableOption.totalRowsCount"
                                    [hiddenHead]="true" [needPaginator]="true" [tableClasses]="['table', 'full-color-table', 'color-bordered-table', 'muted-bordered-table', 'hover-table', 'home-table']"
                                    (pageChanged)="onTablePageChanged($event)">
                                    <op-data-table-head title="First Name" dataField="firstName" width="125"></op-data-table-head>
                                    <op-data-table-head title="Last Name" dataField="lastName" width="125"></op-data-table-head>
                                    <op-data-table-head title="Job Title" dataField="jobTitle"></op-data-table-head>

                                    <op-data-table-head title="Birthday" dataField="birthday" width="125">
                                        <ng-container *opProjectedTemplate="let row">
                                            {{row.birthday | date: shortDateFormat}}
                                        </ng-container>
                                    </op-data-table-head>

                                    <op-data-table-head title="Status" dataField="status" width="125">
                                        <span *opProjectedTemplate="let row" [innerHTML]="row.status | userStatus"></span>
                                    </op-data-table-head>
                                </op-data-table>
                            </div>
                        </div>
                        <br />
                        <h3 class="box-title">Grid Layout</h3>
                        <hr class="m-t-0 m-b-40">
                        <div class="row">
                            <div class="col-lg-12">
                                <h3>Example</h3>
                                <table class="table table3 table-bordered margin-t-1x">
                                    <tbody>
                                        <tr>
                                            <td class="nowrap">注册号/
                                                <br>统一社会信用代码</td>
                                            <td>91440300192181490G</td>
                                            <td>企业名称</td>
                                            <td>万科企业股份有限公司</td>
                                        </tr>
                                        <tr>
                                            <td>企业联系电话</td>
                                            <td>0755-25606666</td>
                                            <td>邮政编码</td>
                                            <td>518049</td>
                                        </tr>
                                        <tr>
                                            <td>企业通信地址</td>
                                            <td colspan="3">深圳市盐田区大梅沙环梅路33号万科中心</td>
                                        </tr>
                                        <tr>
                                            <td>电子邮箱</td>
                                            <td>zbfax@vanke.com</td>
                                            <td>有限责任公司本年度是否发生股东股权转让</td>
                                            <td>否</td>
                                        </tr>
                                        <tr>
                                            <td>企业经营状态</td>
                                            <td>开业</td>
                                            <td>是否有网站或网店</td>
                                            <td>是</td>
                                        </tr>
                                        <tr>
                                            <td>企业是否有投资信息或购买其他公司股权</td>
                                            <td>是</td>
                                            <td>从业人数</td>
                                            <td>企业选择不公示</td>
                                        </tr>
                                    </tbody>
                                </table>

                                <h3>Generated</h3>
                                <op-grid-layout columns="auto, auto, auto, auto" rows="50px, 50px, 50px, 50px, 50px, 50px"
                                    [body]="gridLayoutOption.body" [tableClasses]="['table table3', 'table-bordered', 'margin-t-1x']">
                                    <op-grid-layout-element [col]="0" [row]="0" verticalAlign="middle" text="注册号/统一社会信用代码"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="1" [row]="0" text="91440300192181490G"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="2" [row]="0" text="企业名称"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="0" text="万科企业股份有限公司"></op-grid-layout-element>

                                    <op-grid-layout-element [col]="0" [row]="1" text="企业联系电话"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="1" [row]="1" text="0755-25606666"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="2" [row]="1" text="邮政编码"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="1" text="518049"></op-grid-layout-element>

                                    <op-grid-layout-element [col]="0" [row]="2" text="企业通信地址"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="1" [row]="2" [colSpan]="3" text="深圳市盐田区大梅沙环梅路33号万科中心"></op-grid-layout-element>

                                    <op-grid-layout-element [col]="0" [row]="3" text="电子邮箱"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="1" [row]="3" text="zbfax@vanke.com"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="2" [row]="3" text="有限责任公司本年度是否发生股东股权转让"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="3" text="否"></op-grid-layout-element>

                                    <op-grid-layout-element [col]="0" [row]="4" text="企业经营状态"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="1" [row]="4" text="开业"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="2" [row]="4" text="是否有网站或网店"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="4" text="是"></op-grid-layout-element>

                                    <op-grid-layout-element [col]="0" [row]="5" text="企业是否有投资信息或购买其他公司股权"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="1" [row]="5">
                                        <ng-container *opProjectedTemplate="let cell">
                                            <span style="background-color: yellow">是</span>
                                        </ng-container>
                                    </op-grid-layout-element>
                                    <op-grid-layout-element [col]="2" [row]="5" text="从业人数"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="5" text="企业选择不公示"></op-grid-layout-element>
                                </op-grid-layout>

                                <h3>Example</h3>
                                <table class="table table1 table-bordered">
                                    <tbody>
                                        <tr>
                                            <td colspan="2" rowspan="5" class="text-center" style="background-color:#fff;vertical-align: bottom;">
                                                <div class="text-center patent-img-container">
                                                    <img src="https://angular.io/assets/images/logos/angular/angular.svg"
                                                        class="img-responsive img-center">
                                                </div>
                                                <span class="small font-f1">万科</span>
                                            </td>
                                            <td class="td-odd">商标名称</td>
                                            <td class="td-even">万科</td>
                                        </tr>
                                        <tr>
                                            <td>商标注册号</td>
                                            <td>25430611</td>
                                        </tr>
                                        <tr>
                                            <td>商标类别</td>
                                            <td>30 - 方便食品</td>
                                        </tr>
                                        <tr>
                                            <td>商标状态</td>
                                            <td>其他</td>
                                        </tr>
                                        <tr>
                                            <td>申请人</td>
                                            <td>
                                                <a href="/company/ddb5c52d-7002-4ac7-87d5-0f727f2ab3e7" target="_blank">万科企业股份有限公司</a>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>申请日</td>
                                            <td>2017-07-20</td>
                                            <td>初审公告日</td>
                                            <td>-</td>
                                        </tr>
                                        <tr>
                                            <td>注册公告日</td>
                                            <td>-</td>
                                            <td>专用期限</td>
                                            <td>至</td>
                                        </tr>
                                        <tr>
                                            <td>专利代理机构</td>
                                            <td colspan="3">
                                                <a href="/company/-" target="_blank">-</a>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>

                                <h3>Generated</h3>
                                <op-grid-layout columns="auto, auto, auto, auto" rows="100px, 100px, 100px, 100px, 100px, 50px, 50px, 50px"
                                    [body]="gridLayoutOption.body" [tableClasses]="['table table3', 'table-bordered', 'margin-t-1x']">
                                    <op-grid-layout-element [col]="0" [row]="0" [colSpan]="2" [rowSpan]="5" textAlign="center">
                                        <ng-container *opProjectedTemplate="let cell">
                                            <div class="text-center patent-img-container">
                                                <img src="https://angular.io/assets/images/logos/angular/angular.svg"
                                                    class="img-responsive img-center">
                                            </div>
                                            <span class="small font-f1">万科</span>
                                        </ng-container>
                                    </op-grid-layout-element>
                                    <op-grid-layout-element [col]="2" [row]="0" text="商标名称"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="0" text="万科"></op-grid-layout-element>

                                    <op-grid-layout-element [col]="2" [row]="1" text="商标注册号"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="1" text="25430611"></op-grid-layout-element>

                                    <op-grid-layout-element [col]="2" [row]="2" text="商标类别"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="2" text="30 - 方便食品"></op-grid-layout-element>

                                    <op-grid-layout-element [col]="2" [row]="3" text="商标状态"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="3" text="其他"></op-grid-layout-element>

                                    <op-grid-layout-element [col]="2" [row]="4" text="申请人"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="4">
                                        <ng-container *opProjectedTemplate="let cell">
                                            <a href="https://angular.io/" target="_blank">万科企业股份有限公司</a>
                                        </ng-container>
                                    </op-grid-layout-element>

                                    <op-grid-layout-element [col]="0" [row]="5" text="申请日"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="1" [row]="5" text="2017-07-20"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="2" [row]="5" text="初审公告日"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="5" text="-"></op-grid-layout-element>

                                    <op-grid-layout-element [col]="0" [row]="6" text="注册公告日"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="1" [row]="6" text="-"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="2" [row]="6" text="专用期限"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="3" [row]="6" text="是"></op-grid-layout-element>

                                    <op-grid-layout-element [col]="0" [row]="7" text="专利代理机构"></op-grid-layout-element>
                                    <op-grid-layout-element [col]="1" [row]="7" [colSpan]="3" text="-"></op-grid-layout-element>
                                </op-grid-layout>
                            </div>
                        </div>
                        <br />
                        <h3 class="box-title">Address</h3>
                        <hr class="m-t-0 m-b-40">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-3">Address:</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static"> E104, Dharti-2, Near silverstar mall </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-3">City:</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static"> Bhavnagar </p>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-3">State:</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static"> Gujarat </p>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <!--/row-->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-3">Post Code:</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static"> 457890 </p>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                            <div class="col-md-6">
                                <div class="form-group row">
                                    <label class="control-label text-right col-md-3">Country:</label>
                                    <div class="col-md-9">
                                        <p class="form-control-static"> India </p>
                                    </div>
                                </div>
                            </div>
                            <!--/span-->
                        </div>
                        <h3 class="box-title">Tooltip Styling</h3>
                        <hr class="m-t-0 m-b-40">
                        <div class="row el-element-overlay">
                            <div class="col-md-12">
                                <h4 class="card-title">Fade-in effect</h4>
                                <h6 class="card-subtitle m-b-20 text-muted">You can use by default
                                    <code>el-overlay</code>
                                </h6>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="card">
                                    <div class="el-card-item">
                                        <div class="el-card-avatar el-overlay-1">
                                            <img src="assets/images/users/1.jpg" alt="user" />
                                            <div class="el-overlay">
                                                <ul class="el-info">
                                                    <li>
                                                        <a class="btn default btn-outline image-popup-vertical-fit"
                                                            href="../plugins/images/users/1.html">
                                                            <i class="icon-magnifier"></i>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="btn default btn-outline" href="javascript:void(0);">
                                                            <i class="icon-link"></i>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="el-card-content">
                                            <h3 class="box-title">Genelia Deshmukh</h3>
                                            <small>Managing Director</small>
                                            <br />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="card">
                                    <div class="el-card-item">
                                        <div class="el-card-avatar el-overlay-1">
                                            <img src="assets/images/users/2.jpg" alt="user" />
                                            <div class="el-overlay">
                                                <ul class="el-info">
                                                    <li>
                                                        <a class="btn default btn-outline image-popup-vertical-fit"
                                                            href="../plugins/images/users/1.html">
                                                            <i class="icon-magnifier"></i>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="btn default btn-outline" href="javascript:void(0);">
                                                            <i class="icon-link"></i>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="el-card-content">
                                            <h3 class="box-title">Genelia Deshmukh</h3>
                                            <small>Managing Director</small>
                                            <br />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="card">
                                    <div class="el-card-item">
                                        <div class="el-card-avatar el-overlay-1">
                                            <img src="assets/images/users/3.jpg" alt="user" />
                                            <div class="el-overlay">
                                                <ul class="el-info">
                                                    <li>
                                                        <a class="btn default btn-outline image-popup-vertical-fit"
                                                            href="../plugins/images/users/1.html">
                                                            <i class="icon-magnifier"></i>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="btn default btn-outline" href="javascript:void(0);">
                                                            <i class="icon-link"></i>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="el-card-content">
                                            <h3 class="box-title">Genelia Deshmukh</h3>
                                            <small>Managing Director</small>
                                            <br />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3 col-md-6">
                                <div class="card">
                                    <div class="el-card-item">
                                        <div class="el-card-avatar el-overlay-1">
                                            <img src="assets/images/users/4.jpg" alt="user" />
                                            <div class="el-overlay">
                                                <ul class="el-info">
                                                    <li>
                                                        <a class="btn default btn-outline image-popup-vertical-fit"
                                                            href="../plugins/images/users/1.html">
                                                            <i class="icon-magnifier"></i>
                                                        </a>
                                                    </li>
                                                    <li>
                                                        <a class="btn default btn-outline" href="javascript:void(0);">
                                                            <i class="icon-link"></i>
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="el-card-content">
                                            <h3 class="box-title">Genelia Deshmukh</h3>
                                            <small>Managing Director</small>
                                            <br />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-12 col-md-12">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title">Tooltip Style 11 Bloated Tooltip
                                            <a class="get-code" data-toggle="collapse" href="#tt11" aria-expanded="true">
                                                <i class="fa fa-code" title="Get Code" data-toggle="tooltip"></i>
                                            </a>
                                        </h4>
                                        <div class="collapse m-t-15" id="tt11" aria-expanded="true">
                                            <code>
                                                &lt;span class="mytooltip tooltip-effect-1"&gt;
                                                &lt;span class="tooltip-item2">Euclid&lt;/span&gt;
                                                &lt;span class="tooltip-content4 clearfix"&gt;
                                                &lt;span class="tooltip-text2"&gt;
                                                &lt;strong&gt;Euclid&lt;/strong&gt;
                                            </code>
                                        </div>
                                        <p>
                                            Tesseract, finite but unbounded take root and flourish,
                                            <span class="mytooltip tooltip-effect-1">
                                                <span class="tooltip-item2">Euclid</span>
                                                <span class="tooltip-content4 clearfix">
                                                    <span class="tooltip-text2">
                                                        <strong>Euclid</strong>, also known as Euclid of Alexandria,
                                                        was a Greek
                                                        mathematician, often referred to as the "Father of Geometry".
                                                        He
                                                        was active in Alexandria during the reign of Ptolemy I.
                                                        <a href="http://en.wikipedia.org/wiki/Euclid">Wikipedia</a>
                                                    </span>
                                                </span>
                                            </span> rogue laws of physics, star stuff harvesting star light,
                                            encyclopaedia galactica
                                            are creatures of the cosmos the only home we've ever known ship of the
                                            imagination
                                            prime number
                                            <span class="mytooltip tooltip-effect-2">
                                                <span class="tooltip-item2">quasar</span>
                                                <span class="tooltip-content4 clearfix">
                                                    <span class="tooltip-text2">
                                                        <strong>Quasars</strong> are believed to be powered by
                                                        accretion of material
                                                        into supermassive black holes in the nuclei of distant
                                                        galaxies,
                                                        making these luminous versions of the general...
                                                        <a href="http://en.wikipedia.org/wiki/Quasar">Wikipedia</a>
                                                    </span>
                                                </span>
                                            </span> courage of our questions.
                                        </p>
                                        <p>
                                            Colonies. Jean-François Champollion, billions upon billions descended from
                                            astronomers the sky calls to us! Made in the interiors
                                            of collapsing stars, billions upon billions radio telescope paroxysm of
                                            global
                                            death not a sunrise but a galaxyrise, gathered by gravity permanence of the
                                            stars?
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title">Tooltip Style 7
                                            <a class="get-code" data-toggle="collapse" href="#tt7" aria-expanded="true">
                                                <i class="fa fa-code" title="Get Code" data-toggle="tooltip"></i>
                                            </a>
                                        </h4>
                                        <div class="collapse m-t-15" id="tt7" aria-expanded="true">
                                            <code>&lt;a class="mytooltip tooltip-effect-7" href="#"&gt;Photography&lt;span class="tooltip-content2"&gt;&lt;i class="fa fa-camera-retro"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;</code>
                                        </div>
                                        <p>
                                            rogue laws of physics, star stuff
                                            <a class="mytooltip tooltip-effect-7" href="#">About me
                                                <span class="tooltip-content2">
                                                    <i class="fa fa-user"></i>
                                                </span>
                                            </a> harvesting star light star light.of physics.
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6 col-md-6">
                                <div class="card">
                                    <div class="card-body">
                                        <h4 class="card-title">Tooltip Style 10 Bloated Tooltip
                                            <a class="get-code" data-toggle="collapse" href="#tt10" aria-expanded="true">
                                                <i class="fa fa-code" title="Get Code" data-toggle="tooltip"></i>
                                            </a>
                                        </h4>
                                        <div class="collapse m-t-15" id="tt10" aria-expanded="true">
                                            <code>
                                                &lt;a class="mytooltip" href="javascript:void(0)"&gt;
                                                    &lt;i class="fa fa-fw fa-car"&gt;&lt;/i&gt;Car 
                                                    &lt;span class="tooltip-content3">You can easily navigate the city by car.&lt;/span&gt;
                                                    &lt;/a&gt;
                                            </code>
                                        </div>
                                        <p>
                                            Star stuff harvesting
                                            <a class="mytooltip" href="javascript:void(0)">
                                                <i class="fa fa-fw fa-car"></i> Car
                                                <span class="tooltip-content3">You can easily navigate the city by car.</span>
                                            </a>star light, encyclopaedia galactica are creatures of the cosmos.
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-offset-3 col-md-9">
                                        <button type="submit" class="btn btn-info">
                                            <i class="fa fa-pencil"></i> Edit</button>
                                        <button type="button" class="btn btn-inverse">Cancel</button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6"> </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Row -->